<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never">
      <el-row :gutter="20">
        <el-col :span="2"
          ><el-input size="mini" placeholder="楼宇名称"></el-input>
        </el-col>
        <el-col :span="2"
          ><el-input size="mini" placeholder="楼宇名称"></el-input>
        </el-col>
        <el-col :span="2"
          ><el-input size="mini" placeholder="楼宇名称"></el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" size="mini" @click="HandlerSeach()"
            >查询</el-button
          >
          <el-button type="primary" size="mini" @click="HandlerAdd()"
            >添加店铺</el-button
          ></el-col
        >
      </el-row>
    </el-card>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      style="margin-top: 1%; font-size: 13px"
    >
      <el-table-column label="房间名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.personInChargeName }}
        </template>
      </el-table-column>

      <el-table-column label="装修负责人" align="center">
        <template slot-scope="scope">
          {{ scope.row.personInChargeName }}
        </template>
      </el-table-column>

      <el-table-column label="负责人电话" align="center">
        <template slot-scope="scope">
          {{ scope.row.personInChargePhone }}
        </template>
      </el-table-column>

      <el-table-column label="进场时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.merchantAddress }}
        </template>
      </el-table-column>

      <el-table-column label="施工时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.startDate }} {{ scope.row.endDate }}
        </template>
      </el-table-column>

      <el-table-column label="审核金额" align="center">
        <template slot-scope="scope">
          {{ scope.row.bond }}
        </template>
      </el-table-column>

      <el-table-column label="备注" align="center">
        <template slot-scope="scope">
          {{ scope.row.remarks }}
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center" width="150">
        <template slot-scope="scope">
          <el-tag type="primary" v-if="scope.row.review == 1" size="mini"
            >审核中</el-tag
          >
          <el-tag type="success" v-if="scope.row.review == 2" size="mini"
            >审核通过</el-tag
          >
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center" width="160">
        <template slot-scope="scope">
          {{ scope.row.creationTime | formatYmd }}
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        prop="created_at"
        label="操作"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="handleDetails(scope.row.id)"
            >详情</el-button
          >
          <el-popconfirm
            title="是否审核通过？"
            size="mini"
            confirm-button-text="是"
            cancel-button-text="驳回"
            icon="el-icon-question"
            icon-color="red"
            @confirm="handleConfirm(scope.row.id, 2)"
            @cancel="handleConfirm(scope.row.id, 3)"
          >
            <el-button slot="reference" size="mini">审核</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="where.currentPage"
        :page-sizes="[10, 15, 20, 25, 30]"
        :page-size="where.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getMaterialList } from "@/api/custom";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      list: null,
      listLoading: true,
      where: {
        pageSize: 15,
        pageIndex: 1,
        state: "",
      },
      total: 0,
    };
  },
  created() {
    this.fetchData(this.where);
  },
  methods: {
    fetchData(obj) {
      this.listLoading = true;
      getMaterialList(obj)
        .then((response) => {
          console.log(response);
          this.listLoading = false;
          this.list = response.data.list;
          this.total = response.data.total;
        })
        .catch((error) => {
          console.log(error);
        })
        .finally(() => {
          this.listLoading = false;
        });
    },

    handleConfirm(id, obj) {
      this.isLoading = true; // 开始加载
      // 调用接口
      findApprovedById(id, obj)
        .then((res) => {
          this.$message.success(res.message);
          this.fetchData(this.where);
        })
        .catch((err) => {
          this.$message.success(err.message);
        })
        .finally(() => {
          this.isLoading = false; // 结束加载
        });
    },
    handleSizeChange(val) {
      this.where.pageSize = val;
      this.fetchData(this.where);
    },
    handleCurrentChange(val) {
      console.log(val);
      this.where.currentPage = val;
      this.fetchData(this.where);
    },
    HandlerSeach() {
      this.fetchData(this.where);
    },
    handleDetails(id) {
      window.open(
        this.$router.resolve({
          path: "/customer/RenovationDetails",
          query: { id: id },
        }).href,
        "_blank"
      );
    },
    HandlerAdd() {
      saveShop(this.form).then((response) => {
        console.log(response);
        this.fetchData(this.where);
      });
    },
  },
};
</script>